<template>
  <div class="demo-container">
    <h1>气泡弹出窗组件演示</h1>

    <div class="demo-item">
      <h2>点击触发 - 底部弹出</h2>
      <m-popover placement="bottom">
        <template #trigger>
          <button class="demo-button">点击我</button>
        </template>
        <div class="popover-content">
          <p>这是一个底部弹出的气泡</p>
          <p>可以包含多行内容</p>
        </div>
      </m-popover>
    </div>

    <div class="demo-item">
      <h2>点击触发 - 顶部弹出</h2>
      <m-popover placement="top">
        <template #trigger>
          <button class="demo-button">点击我</button>
        </template>
        <div class="popover-content">
          <p>这是一个顶部弹出的气泡</p>
        </div>
      </m-popover>
    </div>

    <div class="demo-item">
      <h2>点击触发 - 左侧弹出</h2>
      <m-popover placement="left">
        <template #trigger>
          <button class="demo-button">点击我</button>
        </template>
        <div class="popover-content">
          <p>这是一个左侧弹出的气泡</p>
        </div>
      </m-popover>
    </div>

    <div class="demo-item">
      <h2>点击触发 - 右侧弹出</h2>
      <m-popover placement="right">
        <template #trigger>
          <button class="demo-button">点击我</button>
        </template>
        <div class="popover-content">
          <p>这是一个右侧弹出的气泡</p>
        </div>
      </m-popover>
    </div>

    <div class="demo-item">
      <h2>悬停触发</h2>
      <m-popover trigger="hover" placement="top">
        <template #trigger>
          <button class="demo-button">悬停我</button>
        </template>
        <div class="popover-content">
          <p>这是一个悬停触发的气泡</p>
        </div>
      </m-popover>
    </div>

    <div class="demo-item">
      <h2>自定义偏移量</h2>
      <m-popover placement="bottom" :offset="20">
        <template #trigger>
          <button class="demo-button">偏移20px</button>
        </template>
        <div class="popover-content">
          <p>这个气泡距离触发元素20px</p>
        </div>
      </m-popover>
    </div>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';
// 引入Popover组件
import MPopover from '@/components/Popover.vue';
</script>

<style scoped>
.demo-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

h2 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #555;
}

.demo-item {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.demo-button {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.demo-button:hover {
  background-color: #66b1ff;
}

.popover-content {
  color: #333;
  font-size: 14px;
}
</style>